<template>
	<view class="home">
		<u-navbar title="记账" placeholder autoBack left-icon-color="#000">
			<template #right>
				<u-text text="确认" @click="_addAccountLog" color="#0c9bf4" size="32rpx"></u-text>
			</template>
		</u-navbar>
		<view class="form">
			<u-form :model="data.form" label-width="auto" :disabled="true">
				<u-form-item label="工单" :borderBottom="true">
					<u-input border="none" v-model="data.form.order_name" @change="searchOrder" placeholder="请输入工单名称搜索"
						input-align="right"></u-input>
				</u-form-item>
				<scroll-view scroll-y="true" class="popup-search" v-if="data.searchShow">
					<view class="search-item" @click="confirmOrder(item)" v-for="item in data.searchList" :key="item.id">{{item.name}}</view>
					<u-empty v-if="!data.searchList.length" ></u-empty>
				</scroll-view>
				<u-form-item label="账目类型" :borderBottom="true">
					<u-text align="right" suffix-icon="arrow-right" :color="data.form.type_title!='请选择'?'#333':'#c0c4cc'"
						:text="data.form.type_title" @click="changeType"></u-text>
				</u-form-item>
				<u-form-item label="金额" :borderBottom="true">
					<u-input border="none" v-model="data.form.money" input-align="right" placeholder="请输入"></u-input>
				</u-form-item>
				<u-form-item label="类型" :borderBottom="true">
					<up-radio-group v-model="data.form.in_out">
						<up-radio label="收入" :name="1"> </up-radio>
						<up-radio label="支出" style="marginLeft:40rpx" :name="2"> </up-radio>
					</up-radio-group>
				</u-form-item>
				<u-form-item label="记账时间" :borderBottom="true">
					<u-text align="right" suffix-icon="arrow-right" color="#333" :text="data.form.account_time"
						@click="changeTime"></u-text>
				</u-form-item>
				<u-form-item label="支付账户" :borderBottom="true">
					<u-input border="none" v-model="data.form.account" placeholder="请选择" input-align="right"></u-input>
				</u-form-item>
				<u-form-item label="支付图片" label-position="top">
					<u-upload class="u-m-t-20" width="160rpx" height="160rpx" :fileList="fileList" multiple max-count="9"
						@afterRead="afterRead" @delete="deletePic">
						<u-image src="/static/images/icon_upload.png" width="160rpx" height="160rpx"></u-image>
					</u-upload>
				</u-form-item>
				<u-form-item label="备注" label-position="top">
					<u-textarea border="none" v-model="data.form.desc" placeholder="请输入"></u-textarea>
				</u-form-item>
			</u-form>
		</view>
		<up-picker :show="data.typeShow" :columns="data.columns" :defaultIndex="[0,0]" @change="changeSelectType"
			@confirm="confirmType" @cancel="changeType" keyName="title"></up-picker>
		<up-datetime-picker :show="data.timeShow" v-model="data.defaultTime" mode="datetime" :formatter="formatter"
			@cancel="changeTime" @confirm="confirmTime"></up-datetime-picker>
	</view>
</template>
<script setup>
	import { onMounted, ref } from "vue";
	import { timeFormat } from 'uview-plus';
	import { accountType, addAccountLog, logInfo, searchOrderList, secondType } from "../../config/api";
	import { prefixURL, _upload } from "../../util/util";
	import { throttle } from 'uview-plus';
	const props = defineProps({
		id: ''
	})
	const data = ref({
		form: {
			type_title: '请选择',
			account_time: timeFormat(new Date(), 'yyyy-mm-dd hh:MM'),
			in_out: 1
		},
		timeShow: false,
		typeShow: false,
		columns: [],
		defaultTime: Number(new Date()),
		searchShow: false,
		searchList: []
	});
	let fileList = ref([])
	onMounted(() => {
		if (props.id) {
			_logInfo()
		}
		_accountType(0, 0)
	})
	const searchOrder = (value) => {
		if (!value) data.value.searchShow = false
		else {
			searchOrderList({ keywords: value }).then(res => {
				data.value.searchList = res.data
				data.value.searchShow = true
			})
		}
	}
	const confirmOrder = (item) => {
		console.log(item)
		data.value.form.order_name = item.name
		data.value.form.order_id = item.id
		data.value.searchShow = false
	}
	const changeSelectType = (row) => {

		if (row.columnIndex == 1) return
		_accountType(row.value[0].id, 1)
	}
	// 二级账目类型
	const _accountType = (p_id = 0, level) => {
		accountType({ p_id }).then(res => {
			console.log(level)
			data.value.columns[level] = res.data
			if (p_id == 0) {
				_accountType(data.value.columns[0][0].id, 1)
			}
		})
	}
	const confirmType = (row) => {
		console.log(row)
		data.value.form.type_title = row.value[1].title
		data.value.form.type_id = row.value[1].id
		data.value.typeShow = false
	}
	// 上传图片
	const afterRead = async (event) => {
		let list = [].concat(event.file)
		let index = fileList.value.length
		list.forEach((item) => {
			fileList.value.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < list.length; i++) {
			const result = await _upload(list[i].url)
			let item = fileList.value[index];
			console.log(item)
			fileList.value.splice(index, 1, {
				...item,
				status: 'success',
				message: '',
				url: result,
			});
			index++
		}
	}
	// 删除图片
	const deletePic = (event) => {
		fileList.value.splice(event.index, 1)
	}
	// 时间确认选择
	const confirmTime = (row) => {
		data.value.form.account_time = uni.$u.timeFormat(row.value, 'yyyy-mm-dd hh:MM')
		data.value.defaultTime = row.value
		data.value.timeShow = false
	}
	const changeTime = () => {
		data.value.timeShow = !data.value.timeShow
	}
	const changeType = () => {
		data.value.typeShow = !data.value.typeShow
	}
	// 新增账目
	const _addAccountLog = () => {
		let account_time = parseInt(new Date(data.value.form.account_time).getTime() / 1000)
		console.log(account_time)
		let images = []
		fileList.value.forEach(item => images.push(item.url))
		addAccountLog({ ...data.value.form, account_time, images: images.join(',') }).then(res => {
			uni.$u.toast(res.msg)
			setTimeout(() => {
				uni.navigateBack()
			}, 500)
		})
	}
	const formatter = (type, value) => {
		if (type === 'year') {
			return `${value}年`;
		}
		if (type === 'month') {
			return `${value}月`;
		}
		if (type === 'day') {
			return `${value}日`;
		}
		if (type === 'hour') {
			return `${value}时`;
		}
		if (type === 'minute') {
			return `${value}分`;
		}

		return value;
	}
</script>
<style scoped lang="scss">
	.home {
		min-height: 100vh;
		background: #fafafa;
	}

	.form {
		padding: 0 24rpx;
		background: #fff;
		margin-top: 20rpx;
	}

	::v-deep .u-form-item__body {
		padding: 30rpx 0;
	}

	::v-deep .u-radio-group--row {
		justify-content: flex-end;
	}

	.popup-search {
		position: absolute;
		z-index: 1;
		background: #fff;
		border-radius: 4rpx;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
		left: 24rpx;
		right: 24rpx;
		height: 330rpx;
		box-sizing: border-box;
		transition: all .3s;
		width: auto;
		overflow: hidden;

		.search-item {
			padding: 20rpx;
			color: #333;
		}
	}
</style>